﻿@model SysAdminDto
@{
    ViewData["Title"] = "编辑/添加用户";
    var Roles = ViewBag.Roles as List<SysRole>;
}
<style>

    .select-tree {
        position: absolute;
        background-color: #fff;
        padding: 5px 25px;
        z-index: 1000;
        box-shadow: 0 0 24px rgba(0,0,0,.18);
        opacity: 0;
        height: 0;
        display: none;
    }

        .select-tree.active {
            display: block;
            opacity: 1;
            height: auto;
            max-height: 500px;
            overflow: auto;
            transition: all .5s;
        }

    .layui-upload-img {
        width: 92px;
        height: 92px;
        margin: 0 10px 10px 0;
    }
</style>

<form class="layui-form form-cus" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">所属部门</label>
            <div class="layui-input-inline">
                <input type="text" id="OrganizeName" value="@Model.OrganizeName" lay-verify="required" lay-verType="tips" autocomplete="off" placeholder="请选择所属部门" class="layui-input">
                <div class="select-tree">
                    <div id="organizeTree" class="layui-tree-cus"></div>
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">所属角色</label>
            <div class="layui-input-inline">
                <select name="RoleId" lay-verify="required" lay-search="">
                    <option value="">选择或搜索选择</option>
                    @foreach (var item in Roles)
                    {
                        if (item.ID == Model.RoleId)
                        {
                            <option value="@item.ID" selected="selected">@item.Name</option>
                        }
                        else
                        {
                            <option value="@item.ID">@item.Name</option>
                        }
                    }
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-inline">
                <input type="text" name="Account" value="@Model.Account" maxlength="20" lay-verify="required" lay-verType="tips" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="Pwd" value="@Model.Pwd" maxlength="20" lay-verify="required" lay-verType="tips" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="RelName" value="@Model.RelName" maxlength="10" lay-verify="required" lay-verType="tips" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">编号</label>
            <div class="layui-input-inline">
                <input type="text" name="IDCard" value="@Model.IDCard" maxlength="6" lay-verify="required" lay-verType="tips" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <input type="radio" name="Sex" value="true" title="男" @(Model.Sex ? "checked" : "")>
                <input type="radio" name="Sex" value="false" title="女" @(!Model.Sex ? "checked" : "")>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <input type="checkbox" @(Model.IsEnable ? "checked" : "") name="IsEnable" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-inline">
                <input type="text" name="Mobile" value="@Model.Mobile" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="email" name="Email" value="@Model.Email" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">头像</label>
            <div class="layui-input-inline">
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-warm" id="openUpload">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="HeadPicImg">
                        <p id="HeadPicText"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-cur-submit">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="submit" id="submit"><i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-hide"></i>立即提交</button>
            <button type="button" class="layui-btn layui-btn-primary btn-open-close">取消</button>
        </div>
    </div>
    <input type="hidden" name="ID" id="ID" value="@Model.ID" />
    <input type="hidden" name="OrganizeId" id="OrganizeId" value="@Model.OrganizeId" />
    <input type="hidden" name="CreateTime" value="@Model.CreateTime" />
    <input type="hidden" name="Creator" value="@Model.Creator" />
    <input type="hidden" name="HeadPic" id="HeadPic" value="@Model.HeadPic" />
</form>

@section Scripts{
    <script type="text/javascript">
        layui.config({
            base: '/js/modules/'
        }).use(['layer', 'jquery', 'api', 'form', 'tree', 'upload'], function () {

            var form = layui.form,
                $ = layui.$,
                api = layui.api,
                tree = layui.tree,
                upload = layui.upload;

            var index = parent.layer.getFrameIndex(window.name);
            var headPic = $('#HeadPic').val();

            if (headPic != "") {
                $('#HeadPicImg').attr('src', "/upload/images/headpic/" + headPic);
            }

            //图片上传
            var uploadInst = upload.render({
                elem: '#openUpload',
                url: '/Sys/Admin/UploadImg/',
                headers: api.getToken(),
                accept: "images",
                //exts: "jpg|png|gif|bmp|jpeg",
                //acceptMime: 'image/jpg,image/png',
                size: 300,
                before: function (obj) {//文件提交上传前的回调
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#HeadPicImg').attr('src', result); //图片链接（base64）
                    });
                },
                done: function (res, index) {//执行上传请求后的回调。分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）。详见下文
                    if (res.statusCode == 200) {
                        $("#HeadPic").val(res.data);
                    }
                    return layer.msg(res.msg);
                },
                error: function () {
                    //失败状态，并实现重传
                    var demoText = $('#HeadPicText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs headPic-reload">重试</a>');
                    demoText.find('.headPic-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });

            //监听提交
            form.on('submit(submit)', function (data) {
                $('#submit').attr('disabled', true).find('i').removeClass('layui-hide');
                var url = "Sys/Admin/Add";
                if ($("#ID").val()) {
                    url = "Sys/Admin/Update";
                }
                data.field.IsEnable = data.field.IsEnable === 'on' ? true : false;
                var d = {
                    "RoleId": data.field.RoleId,
                    "Account": data.field.Account,
                    "Pwd": data.field.Pwd,
                    "RelName": data.field.RelName,
                    "IDCard": data.field.IDCard,
                    "Sex": data.field.Sex,
                    "IsEnable": data.field.IsEnable,
                    "Mobile": data.field.Mobile,
                    "Email": data.field.Email,
                    "ID": data.field.ID,
                    "OrganizeId": data.field.OrganizeId,
                    "CreateTime": data.field.CreateTime,
                    "Creator": data.field.Creator,
                    "HeadPic": data.field.HeadPic,
                };
                api.ajax(url, 'post', d, function (res) {
                    $('#submit').attr('disabled', false).find('i').addClass('layui-hide');
                    if (res.statusCode == 200) {
                        api.success(res.msg);
                        parent.layer.close(index);
                    }
                    else {
                        api.error(res.msg);
                    }
                });
                return false;
            });

            $(".btn-open-close").on('click', function () {
                parent.layer.close(index);
            });

            var active = {
                loadtree() {
                    api.ajax('Sys/Organize/GetTree', 'GET', {}, function (res) {
                        tree.render({
                            elem: '#organizeTree',
                            data: res,
                            onlyIconControl: true,
                            click: function (obj) {
                                $("#OrganizeId").val(obj.data.id);
                                $("#OrganizeName").val(obj.data.title);
                                $(".select-tree").removeClass('active');
                            }
                        });
                    });
                }
            };

            active.loadtree();

            $("#OrganizeName").click(function () {
                $(".select-tree").addClass('active');
            });
            $(".select-tree").mouseleave(function () {
                $(".select-tree").removeClass('active');
            });
        });

    </script>
}